<template>
    <!-- 发型师 -->
    <div class="box">
        <div class="head">
            <van-icon @click="router.back()" name="arrow-left" />
            <span>关于</span>
            <van-icon name="ellipsis" style="transform: rotate(90deg);" />
        </div>
        <div class="fabox" v-for="(i) in falist" :key="i._id">
            <img :src="i.photoUrl" alt="">
            <div style="width: 70%;">
                <div style="display: flex;flex-direction: column;position: absolute;left: 20%;bottom: 50%;transform: translate(0,50%)">
                    <p style="font-size: 1.3rem;">{{ i.name }}</p>
                    <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{ i.bio }}</p>
                </div>
                <button style="position: absolute;right: 10px;bottom: 50%;transform: translate(0,50%);padding: 9px 15px;
                background-color: #ffb900;border: none;border-radius: 5px;color: #fff;" @click="router.push({
                    path:'/shopfrontabout/fuwu'
                })">预订</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter,useRoute } from 'vue-router';

const router = useRouter()
const route=useRoute()
const falist=ref(JSON.parse(route.query.falist))



</script>
<style scoped>
.box {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 10px;
}

.head {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
}

.fabox {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
    margin: 1rem 0;
}

.fabox img {
    width: 15%;
    height: 80%;
    border-radius: 50%;
}
</style>